<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amis Select带图片预览</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/amis@6.12/sdk/sdk.css">
    <style>
        /* 自定义图片预览样式 */
        .image-preview-container {
            position: relative;
            display: inline-block;
        }

        .image-preview {
            position: absolute;
            left: 100%;
            top: 0;
            margin-left: 10px;
            width: 200px;
            height: 150px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            z-index: 1000;
            display: none;
            padding: 5px;
        }

        .image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 2px;
        }

        /* 自定义选项样式 */
        .option-with-image {
            display: flex;
            align-items: center;
            padding: 8px 12px;
        }

        .option-with-image:hover .image-preview {
            display: block;
        }

        .option-label {
            flex: 1;
        }

        /* 自定义下拉面板样式 */
        .cxd-Select-menu {
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div id="root"></div>

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/amis@6.12/sdk/sdk.js"></script>

<script>
    (function() {
        // 初始化Amis
        const amis = amisRequire('amis/embed');

        // 页面定义
        const app = {
            "type": "page",
            "title": "带图片预览的Select组件",
            "body": [
                {
                    "type": "form",
                    "title": "选择您喜欢的水果",
                    "body": [
                        {
                            "type": "select",
                            "name": "fruit",
                            "label": "水果选择",
                            "source": {
                                "method": "get",
                                "url": "/api/fruits"
                            },
                            "value": "apple",
                            "menuTpl": {
                                "type": "container",
                                "body": [
                                    {
                                        "type": "tpl",
                                        "tpl": "<div class=\"option-with-image\">\n  <span class=\"option-label\">${label}</span>\n  <div class=\"image-preview-container\">\n    <div class=\"image-preview\">\n      <img src=\"${image}\" alt=\"${label}\" />\n    </div>\n  </div>\n</div>",
                                        "inline": false
                                    }
                                ]
                            }
                        }
                    ]
                },
                {
                    "type": "divider"
                },
                {
                    "type": "tpl",
                    "tpl": "<h3>实现说明</h3>\n<p>此示例展示了如何使用百度Amis实现一个带图片预览的Select组件：</p>\n<ul>\n  <li>使用Select组件的menuTpl自定义选项模板</li>\n  <li>通过CSS实现鼠标悬停时图片浮动展示效果</li>\n  <li>使用数据映射绑定图片URL</li>\n</ul>"
                }
            ]
        };

        // 模拟API数据
        const mockData = {
            "status": 0,
            "msg": "",
            "data": {
                "fruits": [
                    {
                        "label": "苹果",
                        "value": "apple",
                        "image": "https://img.zcool.cn/community/01a5ea5a3d6e5fa80121923136c1a0.jpg@1280w_1l_2o_100sh.jpg"
                    },
                    {
                        "label": "香蕉",
                        "value": "banana",
                        "image": "https://img.zcool.cn/community/01c5ea5a3d6f05a801219231f0f1a9.jpg@1280w_1l_2o_100sh.jpg"
                    },
                    {
                        "label": "橙子",
                        "value": "orange",
                        "image": "https://img.zcool.cn/community/01a5ea5a3d6f05a801219231c5c1a0.jpg@1280w_1l_2o_100sh.jpg"
                    },
                    {
                        "label": "草莓",
                        "value": "strawberry",
                        "image": "https://img.zcool.cn/community/01c5ea5a3d6f05a801219231a5c1a9.jpg@1280w_1l_2o_100sh.jpg"
                    },
                    {
                        "label": "葡萄",
                        "value": "grape",
                        "image": "https://img.zcool.cn/community/01a5ea5a3d6f05a801219231b5c1a0.jpg@1280w_1l_2o_100sh.jpg"
                    }
                ]
            }
        };

        // 模拟API请求
        const mockRequest = function(api) {
            if (api.url === '/api/fruits') {
                return Promise.resolve({
                    ...mockData,
                    data: mockData.data.fruits
                });
            }
            return Promise.resolve({});
        };

        // 渲染Amis应用
        amis.embed('#root', app, {}, {
            updateLocation: (location, replace) => {},
            jumpTo: (to, action) => {},
            isCurrentUrl: (url) => false,
            fetcher: ({url, method, data}) => mockRequest({url, method, data}),
            isCancel: (value) => false,
            copy: (content) => {
                console.log('copy:', content);
            }
        });
    })();
</script>
</body>
</html>